<template>
    <div id="phone">
        <van-cell-group inset class="mt20">
            <van-field v-model="userInfo.phone" center type="number" input-align="right" label="手机号" placeholder="请输入手机号">
                <template #button>
                    <van-button size="small" type="success" plain @click="sendCode()">获取验证码</van-button>
                </template>
            </van-field>
            <van-field v-model="userInfo.code" center type="number" input-align="right" label="验证码" placeholder="请输入验证码" />
        </van-cell-group>
        <div class="fixed-bottom">
            <div class="btn-1 btn-1-main" @click="submitPhone()">确认修改</div>
        </div>
    </div>
</template>


<script>
import { showToast } from 'vant';
export default {
    name: 'Phone',
    data() {
        return {
            userInfo: {
                phone: '',
                code: '',
            },
        }
    },
    created() { },
    methods: {
        sendCode(){
            let params = {'phone':this.userInfo.phone};
            this.$api.code.send(params).then(res => {
                showToast({
                    message:'获取成功，尽快验证',
                    overlay:true,
                    forbidClick:true,
                });
            }).finally(e => {});
        },
        submitPhone() {
            let that = this;
            let params = that.userInfo;
            that.$api.user.phone(params).then(res => {
                showToast({
                    message:'修改成功',
                    overlay:true,
                    forbidClick:true,
                });
                setTimeout(() => {
                    that.$router.go(-1);
                }, 2000);
            }).finally(e => {});
        }
    }
}
</script>
